
<template>
    <section class="view">
    
        <section class="view-picture">
    
            <section class="view-picture-image">
    
                <img :src="viewShow.image" alt="">
    
            </section>
    
        </section>
    
        <view-title title="热卖中">
    
            <section slot="right">
    
                <span>更多</span>
    
                <i class="fa fa-chevron-right "></i>
    
            </section>
    
        </view-title>
    
        <view-item :viewItem="viewShow.hotSale"></view-item>
    
        <view-title title="最新上市">
    
            <section slot="right">
    
                <span>更多</span>
    
                <i class="fa fa-chevron-right "></i>
    
            </section>
    
        </view-title>
    
        <view-item :viewItem="viewShow.newSale"></view-item>
    
    </section>
</template>
<script>
    import viewTitle from "./viewTitle/viewTitle";
    
    import viewItem from "./viewItem/viewItem";
    
    export default {
    
        props: ["viewShow"],
    
        components: {
    
            viewItem,
    
            viewTitle
    
        }
    
    };
</script>
<style lang="scss">
    @import "../../../assets/scss/_index.scss";
    
    .view {
    
        width: (750-161)/750*100%;
    
        background: #f6f6f6;
    
        &-picture {
            display: flex;
            justify-content: space-around;
            width: 100%;
            padding-top: px2rem(16);
            padding-bottom: px2rem(12);            
            &-image {
    
                width: px2rem(588);
    
                height: px2rem(222);
    
                display: flex;
    
                justify-content: space-around;
    
                img {
    
                    width: 100%;
    
                }
    
            }
    
        }
        span{
            font-size: px2rem(20);
            color: #333333;
        }
        i{
              font-size: px2rem(20);
            color: #333333;
        }
    
    }
</style>
